<template>
  <div class="dashboard">
    <a-row :gutter="[16, 16]">
      <!-- 统计卡片 -->
      <a-col :xs="24" :sm="12" :md="6">
        <a-card>
          <a-statistic
            title="活跃生命体"
            :value="statistics.activeEntities"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <node-index-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="6">
        <a-card>
          <a-statistic
            title="网络连接"
            :value="statistics.networkConnections"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <share-alt-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="6">
        <a-card>
          <a-statistic
            title="意识等级"
            :value="statistics.avgConsciousnessLevel"
            suffix="/ 100"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <brain-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="6">
        <a-card>
          <a-statistic
            title="系统健康度"
            :value="statistics.systemHealth"
            suffix="%"
            :value-style="{ color: statistics.systemHealth > 80 ? '#3f8600' : '#cf1322' }"
          >
            <template #prefix>
              <heart-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[16, 16]" style="margin-top: 16px">
      <!-- 生命体类型分布 -->
      <a-col :xs="24" :lg="12">
        <a-card title="生命体类型分布" :bordered="false">
          <div ref="typeChartRef" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 意识等级趋势 -->
      <a-col :xs="24" :lg="12">
        <a-card title="意识等级趋势" :bordered="false">
          <div ref="trendChartRef" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[16, 16]" style="margin-top: 16px">
      <!-- 最近活动 -->
      <a-col :xs="24" :lg="16">
        <a-card title="最近活动" :bordered="false">
          <a-timeline>
            <a-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :color="getActivityColor(activity.type)"
            >
              <template #dot>
                <component :is="getActivityIcon(activity.type)" />
              </template>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ formatTime(activity.timestamp) }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>

      <!-- 系统状态 -->
      <a-col :xs="24" :lg="8">
        <a-card title="系统状态" :bordered="false">
          <a-space direction="vertical" style="width: 100%">
            <div class="status-item">
              <span>CPU使用率</span>
              <a-progress :percent="systemStatus.cpu" size="small" />
            </div>
            <div class="status-item">
              <span>内存使用率</span>
              <a-progress :percent="systemStatus.memory" size="small" />
            </div>
            <div class="status-item">
              <span>网络延迟</span>
              <a-tag :color="systemStatus.latency < 100 ? 'green' : 'orange'">
                {{ systemStatus.latency }}ms
              </a-tag>
            </div>
            <div class="status-item">
              <span>在线用户</span>
              <a-tag color="blue">{{ systemStatus.onlineUsers }}</a-tag>
            </div>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  NodeIndexOutlined,
  ShareAltOutlined,
  HeartOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

// 响应式数据
const statistics = ref({
  activeEntities: 1247,
  networkConnections: 3856,
  avgConsciousnessLevel: 78,
  systemHealth: 94,
})

const recentActivities = ref([
  {
    id: 1,
    type: 'create',
    title: '创建了新的企业生命体 "智能制造公司"',
    timestamp: new Date(Date.now() - 5 * 60 * 1000),
  },
  {
    id: 2,
    type: 'update',
    title: '更新了城市生命体 "深圳" 的意识状态',
    timestamp: new Date(Date.now() - 15 * 60 * 1000),
  },
  {
    id: 3,
    type: 'alert',
    title: '检测到网络异常活动',
    timestamp: new Date(Date.now() - 30 * 60 * 1000),
  },
  {
    id: 4,
    type: 'create',
    title: '建立了新的协作关系',
    timestamp: new Date(Date.now() - 45 * 60 * 1000),
  },
])

const systemStatus = ref({
  cpu: 45,
  memory: 67,
  latency: 85,
  onlineUsers: 234,
})

const typeChartRef = ref()
const trendChartRef = ref()

// 获取活动图标
const getActivityIcon = (type: string) => {
  const iconMap = {
    create: PlusOutlined,
    update: EditOutlined,
    delete: DeleteOutlined,
    alert: ExclamationCircleOutlined,
  }
  return iconMap[type as keyof typeof iconMap] || PlusOutlined
}

// 获取活动颜色
const getActivityColor = (type: string) => {
  const colorMap = {
    create: 'green',
    update: 'blue',
    delete: 'red',
    alert: 'orange',
  }
  return colorMap[type as keyof typeof colorMap] || 'blue'
}

// 格式化时间
const formatTime = (timestamp: Date) => {
  const now = new Date()
  const diff = now.getTime() - timestamp.getTime()
  const minutes = Math.floor(diff / (1000 * 60))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`

  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`

  const days = Math.floor(hours / 24)
  return `${days}天前`
}

// 初始化图表（这里使用模拟数据，实际项目中会集成ECharts）
const initCharts = () => {
  // 这里可以集成ECharts或其他图表库
  console.log('初始化图表')
}

onMounted(() => {
  initCharts()
  message.success('仪表盘加载完成')
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.activity-content {
  display: flex;
  flex-direction: column;
}

.activity-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.status-item:last-child {
  margin-bottom: 0;
}
</style>
